import { createVNode, mergeProps, defineComponent, computed, getCurrentInstance, ref, resolveDirective, unref, useSSRContext, resolveDynamicComponent, reactive, onMounted, onBeforeUnmount, onUnmounted, withCtx, openBlock, createBlock, createCommentVNode, toDisplayString, Transition, Fragment, renderList, createTextVNode, onServerPrefetch, withDirectives, vModelText } from "vue";
import { ssrRenderAttrs, ssrRenderList, ssrRenderComponent, ssrRenderAttr, ssrGetDirectiveProps, ssrRenderStyle, ssrIncludeBooleanAttr, ssrRenderVNode, ssrInterpolate, ssrRenderSlot, ssrRenderClass } from "vue/server-renderer";
import { I as IconWrapper, G as getCookie, P as PlusIcon, _ as _export_sfc, t as ArrowLeftIcon, v as ArrowRightIcon, Q as CloseIcon, q as cdnUrl, z as useL10n, R as Image, T as transformUTCToLocal, C as CircleLoadingIcon, U as getUserOrderListApi, j as useTrack, p as useMainStore, l as useNativeInfoStore, A as AppLayout, H as HelpCenterHeader, E as renderComponent, V as postSubmitTicketApi, W as submitCompleteRoute, X as replyCaseApi, M as MessageDialog } from "../entry-server.js";
import { useI18n } from "vue-i18n";
import { load } from "recaptcha-v3";
import "./PinchScrollZoomModal-9cbc65ce.js";
import { useRoute, useRouter } from "vue-router";
import { u as useHelpCenterStore } from "./helpCenter-683376a8.js";
import { T as TicketTip } from "./TicketTip-75d79143.js";
import { u as useDocumentTitle } from "./index-17d7ee25.js";
import { S as SelectedFillIcon } from "./SelectedFillIcon-f745105e.js";
import "path";
import "lodash-es";
import "pinia";
import "dayjs";
import "dayjs/plugin/utc.js";
import "qs";
import "axios";
import "big.js/big.mjs";
import "@vueuse/core";
import "uuid";
import "url";
import "fs/promises";
import "viewerjs";
const ErrorFillIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M14 4.5a9.5 9.5 0 1 1 0 19 9.5 9.5 0 0 1 0-19Zm-2.121 6.318a.75.75 0 0 0-1.134.977l.073.084L12.939 14l-2.121 2.121a.75.75 0 0 0 .977 1.134l.084-.073L14 15.061l2.121 2.121a.75.75 0 0 0 1.134-.977l-.073-.084L15.061 14l2.121-2.121a.75.75 0 0 0-.977-1.134l-.084.073L14 12.939l-2.121-2.121Z",
  "clip-rule": "evenodd",
  "fill-rule": "evenodd",
  "data-follow-fill": "#444"
}, null)]));
const photoKey = (albumName) => {
  const timestamp = Date.now();
  const uuid = getCookie("unique_session_id");
  return `${albumName}-${uuid}-${timestamp}`;
};
async function importSDK() {
  try {
    if (false)
      ;
  } catch (error) {
  }
}
const uploadFile = (file, callback, uploadProgress, photoKey2) => {
  if (!file) {
    callback(null, new Error("Please choose a file to upload first."));
    return Promise.reject(null);
  }
  const fileName = file.name.split(".");
  const fileSuffix = fileName[fileName.length - 1];
  const key = `${photoKey2}.${fileSuffix}`;
  const upload = new window.AWS.S3.ManagedUpload({
    params: {
      Bucket: "patpatwebstatic",
      Key: key,
      Body: file,
      ACL: "public-read"
    }
  });
  upload.on("httpUploadProgress", (event) => {
    uploadProgress(event.loaded * 100 / event.total);
  });
  const onSuccess = (data) => {
    callback(data);
    return data;
  };
  const onReject = (error) => {
    callback(null, error);
    return Promise.reject(error);
  };
  return upload.promise().then(onSuccess, onReject);
};
const uploadHelpCenterImg = (file, callback = (data) => {
}, progress = (p) => {
}) => {
  const albumName = "origin/helpcenter/feedback";
  return uploadFile(file, callback, progress, photoKey(albumName));
};
const initAwsS3 = async () => {
  await importSDK();
  window.AWS.config.region = "us-west-2";
  window.AWS.config.credentials = new window.AWS.CognitoIdentityCredentials({
    IdentityPoolId: "us-west-2:c1e682bb-bc36-4829-94d7-fe3125447c00"
  });
  window.AWS.config.credentials.get(function(err) {
    if (err)
      console.error(err);
    console.log(window.AWS.config.credentials);
  });
};
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
  __name: "FileListUpload",
  __ssrInlineRender: true,
  props: {
    disabled: { type: Boolean, default: false }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const route = useRoute();
    const trackPageName = computed(() => {
      var _a;
      const name = ((_a = route.meta) == null ? void 0 : _a.trackPageName) || "";
      return name ? name + "_" : "";
    });
    getCurrentInstance();
    const fileAccept = ref("image/gif,image/jpeg,image/jpg,image/png");
    const fileList = ref([]);
    ref();
    function singleFileUpload(fileItem) {
      const successCallback = (data) => {
        if (data) {
          window.URL.revokeObjectURL(fileItem.src);
          fileItem.url = data.Location;
          fileItem.status = "done";
        } else {
          fileItem.status = "error";
        }
      };
      const progressCallback = (num) => {
        fileItem.progress = num;
      };
      return uploadHelpCenterImg(fileItem.file, successCallback, progressCallback);
    }
    async function batchUploadImages() {
      const allUploadPromise = fileList.value.reduce((res, fileItem, index) => {
        res.push(
          singleFileUpload(fileItem).then((data) => {
            return { name: fileItem.file.name, type: fileItem.file.type, url: data.Location };
          })
        );
        return res;
      }, []);
      return Promise.allSettled(allUploadPromise);
    }
    __expose({
      fileList,
      batchUploadImages
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_track = resolveDirective("track");
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "file-list-upload" }, _attrs))} data-v-003d2119><!--[-->`);
      ssrRenderList(fileList.value, (fileItem, index) => {
        _push(`<div class="upload-file" data-v-003d2119>`);
        if (!props.disabled) {
          _push(`<button type="button" class="close-btn" data-v-003d2119>`);
          _push(ssrRenderComponent(unref(ErrorFillIcon), {
            width: 24,
            height: 24,
            color: "#444"
          }, null, _parent));
          _push(`</button>`);
        } else {
          _push(`<!---->`);
        }
        _push(`<button type="button" class="upload-img" data-v-003d2119><img${ssrRenderAttr("src", fileItem.src)} alt="upload-image" data-v-003d2119></button></div>`);
      });
      _push(`<!--]--><label${ssrRenderAttrs(mergeProps({
        style: fileList.value.length < 9 ? null : { display: "none" },
        for: "file-input",
        class: "select-btn upload-file"
      }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "add_pic", eventName: "add_pic" }, void 0, {
        click: true,
        exposure: true
      })))} data-v-003d2119>`);
      _push(ssrRenderComponent(unref(PlusIcon), {
        width: 40,
        height: 40,
        color: "#B3B3B3"
      }, null, _parent));
      _push(`<input id="file-input" type="file" style="${ssrRenderStyle({ "display": "none" })}"${ssrIncludeBooleanAttr(props.disabled) ? " disabled" : ""}${ssrRenderAttr("accept", fileAccept.value)} multiple data-v-003d2119></label></div>`);
    };
  }
});
const FileListUpload_vue_vue_type_style_index_0_scoped_003d2119_lang = "";
const _sfc_setup$9 = _sfc_main$9.setup;
_sfc_main$9.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/FileListUpload.vue");
  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
};
const FileListUpload = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-003d2119"]]);
const TickIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M5.615 15.765a.9.9 0 0 1 1.18-1.353l.093.08 3.841 3.843L21.093 7.97a.9.9 0 0 1 1.18-.08l.093.08a.9.9 0 0 1 .08 1.181l-.08.092-11 11a.9.9 0 0 1-1.18.08l-.093-.08-4.478-4.478Z",
  "data-follow-fill": "#444"
}, null)]));
const _sfc_main$8 = {
  name: "LeftOrRightIcon",
  components: { ArrowLeftIcon, ArrowRightIcon },
  props: {
    direction: {
      type: String,
      default: "left"
    }
  },
  setup(props) {
    const i18n = useI18n();
    const isRtl = computed(() => {
      return ["ar", "he"].includes(i18n.locale.value);
    });
    const component = computed(() => {
      if (props.direction === "right") {
        return isRtl.value ? ArrowLeftIcon : ArrowRightIcon;
      } else {
        return isRtl.value ? ArrowRightIcon : ArrowLeftIcon;
      }
    });
    return {
      component
    };
  }
};
function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($setup.component), mergeProps(_ctx.$attrs, _attrs), null), _parent);
}
const _sfc_setup$8 = _sfc_main$8.setup;
_sfc_main$8.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/LeftOrRightIcon.vue");
  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
};
const LeftOrRightIcon = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender]]);
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
  __name: "IssueSelected",
  __ssrInlineRender: true,
  props: {
    value: {}
  },
  emits: ["update:value", "close"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const route = useRoute();
    const trackPageName = computed(() => {
      var _a;
      const name = ((_a = route.meta) == null ? void 0 : _a.trackPageName) || "";
      return name ? name + "_" : "";
    });
    const { t } = useI18n();
    const helpCenterStore = useHelpCenterStore();
    const issueList = computed(() => helpCenterStore.issueList);
    const secondIssueList = computed(() => {
      var _a;
      return ((_a = helpCenterStore.issueList.find((item) => {
        var _a2;
        return item.id === ((_a2 = state.firstIssueItem) == null ? void 0 : _a2.id);
      })) == null ? void 0 : _a.children) || [];
    });
    const issueListRef = ref();
    const issueWrapRef = ref();
    const state = reactive({
      isClose: false,
      firstIssueItem: void 0,
      secondIssueItem: void 0,
      loading: false
    });
    function animationShow() {
      if (issueListRef.value)
        issueListRef.value.style.transform = "translateY(0%)";
      if (issueWrapRef.value)
        issueWrapRef.value.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    }
    function initialValue(val) {
      const firstIssueItem = issueList.value.find((item) => item.id === val);
      if (firstIssueItem) {
        state.firstIssueItem = firstIssueItem;
      } else {
        const allSecondIssues = issueList.value.reduce((res, curr) => res.concat(curr.children || []), []);
        const secondIssueItem = allSecondIssues.find((item) => item.id === val);
        if (secondIssueItem) {
          state.firstIssueItem = issueList.value.find((item) => item.id === secondIssueItem.pid);
          state.secondIssueItem = secondIssueItem;
        }
      }
    }
    function updateIssueList() {
      state.loading = true;
      helpCenterStore.getIssueListData().then(() => {
        initialValue(props.value);
      }).finally(() => {
        state.loading = false;
      });
    }
    onMounted(() => {
      updateIssueList();
      setTimeout(() => animationShow());
      document.body.style.overflow = "hidden";
    });
    onBeforeUnmount(() => {
      document.body.style.overflow = "";
    });
    return (_ctx, _push, _parent, _attrs) => {
      var _a, _b, _c;
      const _directive_track = resolveDirective("track");
      _push(`<div${ssrRenderAttrs(mergeProps({
        ref_key: "issueWrapRef",
        ref: issueWrapRef,
        class: "issue-selected"
      }, _attrs))} data-v-844af3e9><div class="issue-list" data-v-844af3e9><div class="issue-title" data-v-844af3e9>`);
      if ((_a = state.firstIssueItem) == null ? void 0 : _a.id) {
        _push(`<button data-v-844af3e9>`);
        _push(ssrRenderComponent(LeftOrRightIcon, {
          width: 32,
          height: 32,
          color: "#757575"
        }, null, _parent));
        _push(`</button>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<span class="h4 ellipsis" style="${ssrRenderStyle({ paddingInlineStart: `${((_b = state.firstIssueItem) == null ? void 0 : _b.id) ? 0 : "56px"}` })}" data-v-844af3e9>${ssrInterpolate(unref(t)("helpCenter.Issue_selected"))}</span><button class="close-btn" data-v-844af3e9>`);
      _push(ssrRenderComponent(unref(CloseIcon), {
        width: 32,
        height: 32
      }, null, _parent));
      _push(`</button></div>`);
      if (!((_c = state.firstIssueItem) == null ? void 0 : _c.id)) {
        _push(`<div data-v-844af3e9><!--[-->`);
        ssrRenderList(issueList.value, (firstIssue, firstIndex) => {
          _push(`<button${ssrRenderAttrs(mergeProps({
            key: firstIndex,
            class: "issue-list-item"
          }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "level_one_item-" + String(firstIndex + 1).padStart(3, "0"), eventName: "level_one_item" }, void 0, {
            click: true,
            exposure: true
          })))} data-v-844af3e9><span class="content2" data-v-844af3e9><img${ssrRenderAttr("src", unref(cdnUrl)({ url: firstIssue.icon }))}${ssrRenderAttr("alt", firstIssue.url_name)} width="22" height="22" data-v-844af3e9> ${ssrInterpolate(firstIssue.title)}</span>`);
          _push(ssrRenderComponent(LeftOrRightIcon, {
            direction: "right",
            width: 20,
            height: 20,
            color: "#757575"
          }, null, _parent));
          _push(`</button>`);
        });
        _push(`<!--]--></div>`);
      } else {
        _push(`<div data-v-844af3e9><!--[-->`);
        ssrRenderList(secondIssueList.value, (secondIssue, secondIndex) => {
          var _a2;
          _push(`<button${ssrRenderAttrs(mergeProps({
            key: secondIndex,
            class: "issue-list-item"
          }, ssrGetDirectiveProps(_ctx, _directive_track, {
            pId: trackPageName.value + "level_two_item-" + String(secondIndex + 1).padStart(3, "0"),
            eventName: "level_two_item"
          }, void 0, {
            click: true,
            exposure: true
          })))} data-v-844af3e9>`);
          _push(ssrRenderComponent(unref(TickIcon), {
            class: "tick",
            width: 22,
            height: 22,
            color: secondIssue.id === ((_a2 = state.secondIssueItem) == null ? void 0 : _a2.id) ? "#444" : "transparent"
          }, null, _parent));
          _push(`<span class="content2 txt2" data-v-844af3e9>${ssrInterpolate(secondIssue.title)}</span></button>`);
        });
        _push(`<!--]--></div>`);
      }
      _push(`</div></div>`);
    };
  }
});
const IssueSelected_vue_vue_type_style_index_0_scoped_844af3e9_lang = "";
const _sfc_setup$7 = _sfc_main$7.setup;
_sfc_main$7.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/IssueSelected.vue");
  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
};
const IssueSelected = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-844af3e9"]]);
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  __name: "PopupContent",
  __ssrInlineRender: true,
  emits: ["transitionClose"],
  setup(__props, { expose: __expose, emit: emits }) {
    const popupContentRef = ref();
    const popupWrapRef = ref();
    const state = reactive({
      isClose: false,
      loading: false
    });
    function animationShow() {
      state.isClose = false;
      if (popupContentRef.value)
        popupContentRef.value.style.transform = "translateY(0%)";
      if (popupWrapRef.value)
        popupWrapRef.value.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    }
    function animationHide() {
      state.isClose = true;
      if (popupContentRef.value)
        popupContentRef.value.style.transform = "translateY(100%)";
      if (popupWrapRef.value)
        popupWrapRef.value.style.backgroundColor = "rgba(0, 0, 0, 0)";
    }
    __expose({
      animationShow,
      animationHide
    });
    onMounted(() => {
      setTimeout(() => animationShow());
      document.body.style.overflow = "hidden";
    });
    onBeforeUnmount(() => {
      document.body.style.overflow = "";
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({
        ref_key: "popupWrapRef",
        ref: popupWrapRef,
        class: ["popup-wrap", { isClose: state.isClose }]
      }, _attrs))} data-v-cf4c493d><div class="popup-content" data-v-cf4c493d>`);
      ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
      _push(`</div></div>`);
    };
  }
});
const PopupContent_vue_vue_type_style_index_0_scoped_cf4c493d_lang = "";
const _sfc_setup$6 = _sfc_main$6.setup;
_sfc_main$6.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/PopupContent.vue");
  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
};
const PopupContent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-cf4c493d"]]);
const CheckboxCheckedFillIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M20.5 5.5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h13Zm-2.054 5.397a.75.75 0 0 0-.882-.007l-.094.08-4.516 4.515-2.424-2.423-.084-.073a.75.75 0 0 0-1.049 1.05l.073.083 2.954 2.954.084.073a.75.75 0 0 0 .882.007l.094-.08 5.046-5.046.073-.084a.75.75 0 0 0 .007-.882l-.08-.094-.084-.073Z",
  "clip-rule": "evenodd",
  "fill-rule": "evenodd",
  "data-follow-fill": "#444"
}, null)]));
const CheckboxIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M20.5 5.5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h13Zm0 1.5h-13a.5.5 0 0 0-.492.41L7 7.5v13a.5.5 0 0 0 .41.492L7.5 21h13a.5.5 0 0 0 .492-.41L21 20.5v-13a.5.5 0 0 0-.41-.492L20.5 7Z",
  "data-follow-fill": "#444"
}, null)]));
const ErrorIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M14 4.5a9.5 9.5 0 1 1 0 19 9.5 9.5 0 0 1 0-19ZM14 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-2.121 4.818L14 12.94l2.121-2.122a.75.75 0 0 1 1.061 1.06L15.06 14l2.122 2.121a.75.75 0 0 1-1.06 1.061L14 15.06l-2.121 2.122a.75.75 0 0 1-1.061-1.06L12.94 14l-2.122-2.121a.75.75 0 0 1 1.06-1.061Z",
  "data-follow-fill": "#444"
}, null)]));
const RadioIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M14 23.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19Zm0-1.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z",
  "data-follow-fill": "#444"
}, null)]));
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
  __name: "RadioSelectIcon",
  __ssrInlineRender: true,
  props: {
    checked: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _push, _parent, _attrs) => {
      if (!props.checked) {
        _push(ssrRenderComponent(unref(RadioIcon), mergeProps(_ctx.$attrs, _attrs), null, _parent));
      } else {
        _push(ssrRenderComponent(unref(SelectedFillIcon), mergeProps(_ctx.$attrs, _attrs), null, _parent));
      }
    };
  }
});
const _sfc_setup$5 = _sfc_main$5.setup;
_sfc_main$5.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/RadioSelectIcon.vue");
  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
};
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
  __name: "OrderSelectItem",
  __ssrInlineRender: true,
  props: {
    order: {},
    relatedSku: { type: Boolean },
    checked: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const { uts } = useL10n();
    const { t } = useI18n();
    const itemTxt = computed(() => {
      return props.order.quantity > 1 ? t("helpCenter.orders_item") : t("helpCenter.orders_items");
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<button${ssrRenderAttrs(mergeProps({ class: "order-list-item" }, _attrs))} data-v-59e92c8d>`);
      if (!props.relatedSku) {
        _push(ssrRenderComponent(_sfc_main$5, {
          checked: props.checked,
          class: "checked-icon",
          width: 20
        }, null, _parent));
      } else {
        _push(`<!---->`);
      }
      _push(`<div data-v-59e92c8d><div class="content2" data-v-59e92c8d><span data-v-59e92c8d>${ssrInterpolate(unref(t)("helpCenter.order_total"))}: ${ssrInterpolate(unref(uts)(props.order.total_amount))}</span><span style="${ssrRenderStyle({ "margin-inline-start": "16px" })}" data-v-59e92c8d>${ssrInterpolate(_ctx.$t("helpCenter.order_total"))}: ${ssrInterpolate(props.order.quantity)} ${ssrInterpolate(itemTxt.value)}</span></div>`);
      if (props.order.products) {
        _push(`<div class="product-imgs" data-v-59e92c8d><!--[-->`);
        ssrRenderList(props.order.products.slice(0, 4), (product) => {
          _push(ssrRenderComponent(unref(Image), {
            key: product.id,
            class: "product-img",
            src: product.icon,
            alt: ""
          }, null, _parent));
        });
        _push(`<!--]--></div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<span class="date" data-v-59e92c8d>${ssrInterpolate(unref(t)("helpCenter.order_date"))}: ${ssrInterpolate(unref(transformUTCToLocal)(props.order.created_at, "MM-DD-YYYY"))}</span></div>`);
      if (props.relatedSku) {
        _push(ssrRenderComponent(LeftOrRightIcon, {
          class: "arrow-icon",
          direction: "right",
          width: 20,
          color: "#757575"
        }, null, _parent));
      } else {
        _push(`<!---->`);
      }
      _push(`</button>`);
    };
  }
});
const OrderSelectItem_vue_vue_type_style_index_0_scoped_59e92c8d_lang = "";
const _sfc_setup$4 = _sfc_main$4.setup;
_sfc_main$4.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/OrderSelectItem.vue");
  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
};
const OrderSelectItem = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-59e92c8d"]]);
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  __name: "StepInput",
  __ssrInlineRender: true,
  props: {
    min: {},
    max: {},
    value: {}
  },
  emits: ["update:value"],
  setup(__props, { emit: emits }) {
    const props = __props;
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<label${ssrRenderAttrs(mergeProps({
        for: "step-input",
        class: "step-input"
      }, _attrs))} data-v-0ae2f0df><button${ssrIncludeBooleanAttr(props.value <= props.min) ? " disabled" : ""} data-v-0ae2f0df>-</button><input id="step-input" disabled${ssrRenderAttr("value", props.value)} type="number" name="step-input"${ssrRenderAttr("min", props.min)}${ssrRenderAttr("max", props.max)} data-v-0ae2f0df><button${ssrIncludeBooleanAttr(props.value >= props.max) ? " disabled" : ""} data-v-0ae2f0df>+</button></label>`);
    };
  }
});
const StepInput_vue_vue_type_style_index_0_scoped_0ae2f0df_lang = "";
const _sfc_setup$3 = _sfc_main$3.setup;
_sfc_main$3.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/StepInput.vue");
  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
};
const StepInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-0ae2f0df"]]);
const __default__$1 = defineComponent({
  name: "OrderSelect",
  components: { StepInput, OrderSelectItem, LeftOrRightIcon }
});
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  __ssrInlineRender: true,
  props: {
    relatedSku: { type: Boolean, default: false },
    orderId: {},
    skuIds: {},
    orderList: {}
  },
  emits: ["close", "update:orderInfo", "update:skuInfo", "update:orderList"],
  setup(__props, { expose: __expose, emit: emits }) {
    const props = __props;
    let io;
    const { t } = useI18n();
    const { uts } = useL10n();
    const nextPageLoadingRef = ref(null);
    const skuList = computed(() => {
      const allSku = props.orderList.reduce((res, order) => res.concat(order.products), []);
      return allSku.filter((sku) => sku.order_id === state.orderId);
    });
    const popupContentRef = ref();
    const state = reactive({
      listLoading: false,
      error: false,
      finished: false,
      orderId: props.orderId,
      skuQty: {},
      skuIds: props.skuIds || []
    });
    const productSet = ref({});
    const disabledSubmit = computed(() => {
      return !state.skuIds.length;
    });
    function backToPrevious() {
      state.orderId = void 0;
      state.skuIds = [];
      state.skuQty = {};
    }
    function transitionClose(isClose) {
      isClose && emits("close");
    }
    function closePopup() {
      var _a;
      (_a = popupContentRef.value) == null ? void 0 : _a.animationHide();
    }
    function openPopup() {
      var _a;
      (_a = popupContentRef.value) == null ? void 0 : _a.animationShow();
    }
    __expose({ closePopup, openPopup });
    function selectOrder(order) {
      state.orderId = order.order_id;
      if (!props.relatedSku) {
        emits("update:orderInfo", order);
        closePopup();
      }
    }
    function selectSku(skuItem, skuIdx) {
      const index = state.skuIds.findIndex((skuId) => skuId === skuItem.sku_id);
      if (index === -1) {
        productSet.value = Object.assign({}, productSet.value, { [skuItem.sku_id]: 0 });
        state.skuIds = state.skuIds.concat(skuItem.sku_id);
      } else {
        productSet.value = Object.keys(productSet.value).reduce((res, skuId) => {
          if (Number(skuId) !== skuItem.sku_id) {
            res[skuId] = productSet.value[skuId];
          }
          return res;
        }, {});
        state.skuIds = state.skuIds.filter((skuId) => skuId !== skuItem.sku_id);
      }
      state.skuQty = state.skuIds.reduce((res, skuId) => Object.assign(res, { [skuId]: skuItem.quantity }), {});
    }
    function clickSkuSubmit() {
      if (props.relatedSku) {
        const selectSkuinfo = skuList.value.filter((item) => state.skuIds.includes(item.sku_id)).map((item) => {
          return { ...item, quantity: state.skuQty[item.sku_id] };
        });
        const selectOrder2 = props.orderList.find((item) => item.order_id === state.orderId);
        emits("update:skuInfo", selectSkuinfo);
        emits("update:orderInfo", selectOrder2);
        closePopup();
      }
    }
    function updateOrderList() {
      state.listLoading = true;
      return getUserOrderListApi({ last_id: props.orderList.length, page_size: 5 }).then((data = []) => {
        const toatlList = props.orderList.concat(data);
        emits("update:orderList", toatlList);
        state.listLoading = false;
        if (data.length === 0 || data.length < 5) {
          state.finished = true;
        }
        if (toatlList.length === 0) {
          state.error = true;
        }
      }).catch(() => {
        state.error = true;
      });
    }
    function onAfterLeave(el) {
      if (el.classList.contains("sku-list")) {
        io = intialObserver();
      } else {
        io.disconnect();
      }
    }
    function intialObserver() {
      const io2 = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting && !state.listLoading) {
          updateOrderList();
        }
      });
      const target = nextPageLoadingRef.value;
      target && io2.observe(target);
      return io2;
    }
    onMounted(() => {
      io = intialObserver();
    });
    onUnmounted(() => {
      io.disconnect();
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(ssrRenderComponent(PopupContent, mergeProps({
        ref_key: "popupContentRef",
        ref: popupContentRef,
        onTransitionClose: transitionClose
      }, _attrs), {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="order-select" data-v-b912f37b${_scopeId}><div class="popup-title" data-v-b912f37b${_scopeId}>`);
            if (state.orderId && props.relatedSku) {
              _push2(`<button data-v-b912f37b${_scopeId}>`);
              _push2(ssrRenderComponent(LeftOrRightIcon, {
                width: 32,
                color: "#757575"
              }, null, _parent2, _scopeId));
              _push2(`</button>`);
            } else {
              _push2(`<!---->`);
            }
            _push2(`<span class="h4 ellipsis" style="${ssrRenderStyle({ paddingInlineStart: `${state.orderId && props.relatedSku ? 0 : "56px"}` })}" data-v-b912f37b${_scopeId}>${ssrInterpolate(state.orderId && props.relatedSku ? unref(t)("helpCenter.items_selected") : unref(t)("helpCenter.order_selected"))}</span><button class="close-btn" data-v-b912f37b${_scopeId}>`);
            _push2(ssrRenderComponent(unref(CloseIcon), { width: 32 }, null, _parent2, _scopeId));
            _push2(`</button></div>`);
            if (!state.error) {
              if (props.relatedSku && state.orderId) {
                _push2(`<div class="sku-list" data-v-b912f37b${_scopeId}><!--[-->`);
                ssrRenderList(skuList.value, (skuItem, index) => {
                  _push2(`<button class="sku-list-item" data-v-b912f37b${_scopeId}>`);
                  if (state.skuIds.includes(skuItem.sku_id)) {
                    _push2(ssrRenderComponent(unref(CheckboxCheckedFillIcon), {
                      width: 20,
                      class: "checkbox-icon"
                    }, null, _parent2, _scopeId));
                  } else {
                    _push2(ssrRenderComponent(unref(CheckboxIcon), {
                      width: 20,
                      class: "checkbox-icon"
                    }, null, _parent2, _scopeId));
                  }
                  _push2(`<div class="sku-info" data-v-b912f37b${_scopeId}>`);
                  _push2(ssrRenderComponent(unref(Image), {
                    class: "sku-img",
                    src: skuItem.icon,
                    alt: ""
                  }, null, _parent2, _scopeId));
                  _push2(`<div class="sku-details" data-v-b912f37b${_scopeId}><p class="content2 ellipsis" data-v-b912f37b${_scopeId}>${ssrInterpolate(skuItem.product_name)}</p>`);
                  if (skuItem.option) {
                    _push2(`<p class="color-size ellipsis" data-v-b912f37b${_scopeId}><!--[-->`);
                    ssrRenderList(skuItem.option, (option, key) => {
                      _push2(`<span class="option" data-v-b912f37b${_scopeId}>${ssrInterpolate(key)}: ${ssrInterpolate(option)}   </span>`);
                    });
                    _push2(`<!--]--></p>`);
                  } else {
                    _push2(`<!---->`);
                  }
                  _push2(`<p class="sku-price ellipsis" data-v-b912f37b${_scopeId}><span class="h4" data-v-b912f37b${_scopeId}>${ssrInterpolate(unref(uts)(skuItem.store_price))}</span></p></div></div>`);
                  if (skuItem.quantity === 1 || !state.skuIds.includes(skuItem.sku_id)) {
                    _push2(`<span class="sku-count" data-v-b912f37b${_scopeId}>x${ssrInterpolate(skuItem.quantity)}</span>`);
                  } else if (state.skuIds.includes(skuItem.sku_id)) {
                    _push2(ssrRenderComponent(StepInput, {
                      value: state.skuQty[skuItem.sku_id],
                      "onUpdate:value": ($event) => state.skuQty[skuItem.sku_id] = $event,
                      min: 1,
                      max: skuItem.quantity
                    }, null, _parent2, _scopeId));
                  } else {
                    _push2(`<!---->`);
                  }
                  _push2(`</button>`);
                });
                _push2(`<!--]--><div class="confirm-box" data-v-b912f37b${_scopeId}><button class="${ssrRenderClass([{ disabled: disabledSubmit.value }, "confirm-sku"])}" data-v-b912f37b${_scopeId}>${ssrInterpolate(unref(t)("common.confirm"))}</button></div></div>`);
              } else {
                _push2(`<div class="order-list" data-v-b912f37b${_scopeId}><!--[-->`);
                ssrRenderList(props.orderList, (order, index) => {
                  _push2(ssrRenderComponent(OrderSelectItem, {
                    key: order.order_id,
                    order,
                    "related-sku": props.relatedSku,
                    checked: state.orderId === order.order_id,
                    onClick: ($event) => selectOrder(order)
                  }, null, _parent2, _scopeId));
                });
                _push2(`<!--]-->`);
                if (!state.finished) {
                  _push2(`<div class="placeholder-content next-page-loading" data-v-b912f37b${_scopeId}>`);
                  _push2(ssrRenderComponent(unref(CircleLoadingIcon), { width: 40 }, null, _parent2, _scopeId));
                  _push2(`</div>`);
                } else {
                  _push2(`<!---->`);
                }
                _push2(`</div>`);
              }
            } else {
              _push2(`<div class="placeholder-content" data-v-b912f37b${_scopeId}><p style="${ssrRenderStyle({ "display": "flex", "align-items": "center" })}" data-v-b912f37b${_scopeId}>`);
              _push2(ssrRenderComponent(unref(ErrorIcon), { width: 40 }, null, _parent2, _scopeId));
              _push2(` ${ssrInterpolate(unref(t)("account.help.not_found"))}</p></div>`);
            }
            _push2(`</div>`);
          } else {
            return [
              createVNode("div", { class: "order-select" }, [
                createVNode("div", { class: "popup-title" }, [
                  state.orderId && props.relatedSku ? (openBlock(), createBlock("button", {
                    key: 0,
                    onClick: backToPrevious
                  }, [
                    createVNode(LeftOrRightIcon, {
                      width: 32,
                      color: "#757575"
                    })
                  ])) : createCommentVNode("", true),
                  createVNode("span", {
                    class: "h4 ellipsis",
                    style: { paddingInlineStart: `${state.orderId && props.relatedSku ? 0 : "56px"}` }
                  }, toDisplayString(state.orderId && props.relatedSku ? unref(t)("helpCenter.items_selected") : unref(t)("helpCenter.order_selected")), 5),
                  createVNode("button", {
                    class: "close-btn",
                    onClick: closePopup
                  }, [
                    createVNode(unref(CloseIcon), { width: 32 })
                  ])
                ]),
                !state.error ? (openBlock(), createBlock(Transition, {
                  key: 0,
                  name: "slide-fade",
                  onAfterLeave
                }, {
                  default: withCtx(() => [
                    props.relatedSku && state.orderId ? (openBlock(), createBlock("div", {
                      key: 0,
                      class: "sku-list"
                    }, [
                      (openBlock(true), createBlock(Fragment, null, renderList(skuList.value, (skuItem, index) => {
                        return openBlock(), createBlock("button", {
                          key: skuItem.sku_id,
                          class: "sku-list-item",
                          onClick: ($event) => selectSku(skuItem)
                        }, [
                          state.skuIds.includes(skuItem.sku_id) ? (openBlock(), createBlock(unref(CheckboxCheckedFillIcon), {
                            key: 0,
                            width: 20,
                            class: "checkbox-icon"
                          })) : (openBlock(), createBlock(unref(CheckboxIcon), {
                            key: 1,
                            width: 20,
                            class: "checkbox-icon"
                          })),
                          createVNode("div", { class: "sku-info" }, [
                            createVNode(unref(Image), {
                              class: "sku-img",
                              src: skuItem.icon,
                              alt: ""
                            }, null, 8, ["src"]),
                            createVNode("div", { class: "sku-details" }, [
                              createVNode("p", { class: "content2 ellipsis" }, toDisplayString(skuItem.product_name), 1),
                              skuItem.option ? (openBlock(), createBlock("p", {
                                key: 0,
                                class: "color-size ellipsis"
                              }, [
                                (openBlock(true), createBlock(Fragment, null, renderList(skuItem.option, (option, key) => {
                                  return openBlock(), createBlock("span", {
                                    key: `${skuItem.id}-${option}-${key}`,
                                    class: "option"
                                  }, toDisplayString(key) + ": " + toDisplayString(option) + "   ", 1);
                                }), 128))
                              ])) : createCommentVNode("", true),
                              createVNode("p", { class: "sku-price ellipsis" }, [
                                createVNode("span", { class: "h4" }, toDisplayString(unref(uts)(skuItem.store_price)), 1)
                              ])
                            ])
                          ]),
                          skuItem.quantity === 1 || !state.skuIds.includes(skuItem.sku_id) ? (openBlock(), createBlock("span", {
                            key: 2,
                            class: "sku-count"
                          }, "x" + toDisplayString(skuItem.quantity), 1)) : state.skuIds.includes(skuItem.sku_id) ? (openBlock(), createBlock(StepInput, {
                            key: 3,
                            value: state.skuQty[skuItem.sku_id],
                            "onUpdate:value": ($event) => state.skuQty[skuItem.sku_id] = $event,
                            min: 1,
                            max: skuItem.quantity
                          }, null, 8, ["value", "onUpdate:value", "max"])) : createCommentVNode("", true)
                        ], 8, ["onClick"]);
                      }), 128)),
                      createVNode("div", { class: "confirm-box" }, [
                        createVNode("button", {
                          class: ["confirm-sku", { disabled: disabledSubmit.value }],
                          onClick: clickSkuSubmit
                        }, toDisplayString(unref(t)("common.confirm")), 3)
                      ])
                    ])) : (openBlock(), createBlock("div", {
                      key: 1,
                      class: "order-list"
                    }, [
                      (openBlock(true), createBlock(Fragment, null, renderList(props.orderList, (order, index) => {
                        return openBlock(), createBlock(OrderSelectItem, {
                          key: order.order_id,
                          order,
                          "related-sku": props.relatedSku,
                          checked: state.orderId === order.order_id,
                          onClick: ($event) => selectOrder(order)
                        }, null, 8, ["order", "related-sku", "checked", "onClick"]);
                      }), 128)),
                      !state.finished ? (openBlock(), createBlock("div", {
                        key: 0,
                        ref_key: "nextPageLoadingRef",
                        ref: nextPageLoadingRef,
                        class: "placeholder-content next-page-loading"
                      }, [
                        createVNode(unref(CircleLoadingIcon), { width: 40 })
                      ], 512)) : createCommentVNode("", true)
                    ]))
                  ]),
                  _: 1
                })) : (openBlock(), createBlock("div", {
                  key: 1,
                  class: "placeholder-content"
                }, [
                  createVNode("p", { style: { "display": "flex", "align-items": "center" } }, [
                    createVNode(unref(ErrorIcon), { width: 40 }),
                    createTextVNode(" " + toDisplayString(unref(t)("account.help.not_found")), 1)
                  ])
                ]))
              ])
            ];
          }
        }),
        _: 1
      }, _parent));
    };
  }
});
const OrderSelect_vue_vue_type_style_index_0_scoped_b912f37b_lang = "";
const _sfc_setup$2 = _sfc_main$2.setup;
_sfc_main$2.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/OrderSelect.vue");
  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
};
const OrderSelect = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b912f37b"]]);
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "ThirdIssueSelect",
  __ssrInlineRender: true,
  props: {
    issueList: {},
    value: {}
  },
  emits: ["update:value", "close"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const route = useRoute();
    const trackPageName = computed(() => {
      var _a;
      const name = ((_a = route.meta) == null ? void 0 : _a.trackPageName) || "";
      return name ? name + "_" : "";
    });
    const { t } = useI18n();
    const issueList = computed(() => props.issueList);
    const secondIssueList = computed(() => {
      var _a;
      return ((_a = issueList.value.find((item) => {
        var _a2;
        return item.id === ((_a2 = state.firstIssueItem) == null ? void 0 : _a2.id);
      })) == null ? void 0 : _a.children) || [];
    });
    const issueListRef = ref();
    const issueWrapRef = ref();
    const state = reactive({
      isClose: false,
      firstIssueItem: void 0,
      secondIssueItem: void 0,
      loading: false
    });
    function animationShow() {
      if (issueListRef.value)
        issueListRef.value.style.transform = "translateY(0%)";
      if (issueWrapRef.value)
        issueWrapRef.value.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    }
    function initialValue(val) {
      const firstIssueItem = props.issueList.find((item) => item.id === val);
      if (firstIssueItem) {
        state.firstIssueItem = firstIssueItem;
      } else {
        const allSecondIssues = props.issueList.reduce((res, curr) => res.concat(curr.children || []), []);
        const secondIssueItem = allSecondIssues.find((item) => item.id === val);
        if (secondIssueItem) {
          state.firstIssueItem = props.issueList.find((item) => item.id === secondIssueItem.pid);
          state.secondIssueItem = secondIssueItem;
        }
      }
    }
    onMounted(() => {
      initialValue(props.value);
      setTimeout(() => animationShow());
      document.body.style.overflow = "hidden";
    });
    onBeforeUnmount(() => {
      document.body.style.overflow = "";
    });
    return (_ctx, _push, _parent, _attrs) => {
      var _a, _b, _c, _d, _e, _f, _g;
      const _directive_track = resolveDirective("track");
      _push(`<div${ssrRenderAttrs(mergeProps({
        ref_key: "issueWrapRef",
        ref: issueWrapRef,
        class: "issue-selected"
      }, _attrs))} data-v-2bbd1742><div class="issue-list" data-v-2bbd1742><div class="issue-title" data-v-2bbd1742>`);
      if (((_a = state.firstIssueItem) == null ? void 0 : _a.id) && ((_c = (_b = state.firstIssueItem) == null ? void 0 : _b.children) == null ? void 0 : _c.length)) {
        _push(`<button data-v-2bbd1742>`);
        _push(ssrRenderComponent(LeftOrRightIcon, {
          width: 32,
          height: 32,
          color: "#757575"
        }, null, _parent));
        _push(`</button>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<span class="h4 ellipsis" style="${ssrRenderStyle({ paddingInlineStart: `${((_d = state.firstIssueItem) == null ? void 0 : _d.id) ? 0 : "56px"}` })}" data-v-2bbd1742>${ssrInterpolate(unref(t)("account.help.problm"))}</span><button class="close-btn" data-v-2bbd1742>`);
      _push(ssrRenderComponent(unref(CloseIcon), {
        width: 32,
        height: 32
      }, null, _parent));
      _push(`</button></div>`);
      if (!((_e = state.firstIssueItem) == null ? void 0 : _e.id) || !((_g = (_f = state.firstIssueItem) == null ? void 0 : _f.children) == null ? void 0 : _g.length)) {
        _push(`<div data-v-2bbd1742><!--[-->`);
        ssrRenderList(issueList.value, (firstIssue, firstIndex) => {
          var _a2, _b2;
          _push(`<button${ssrRenderAttrs(mergeProps({
            key: firstIndex,
            class: "issue-list-item"
          }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "level_one_item-" + String(firstIndex + 1).padStart(3, "0"), eventName: "level_one_item" }, void 0, {
            click: true,
            exposure: true
          })))} data-v-2bbd1742><span class="content2" data-v-2bbd1742>${ssrInterpolate(firstIssue.title)}</span>`);
          if (!((_a2 = firstIssue.children) == null ? void 0 : _a2.length) && _ctx.value === firstIssue.id) {
            _push(ssrRenderComponent(unref(TickIcon), {
              class: "tick",
              width: 22,
              height: 22,
              color: "#444"
            }, null, _parent));
          } else {
            _push(`<!---->`);
          }
          if ((_b2 = firstIssue.children) == null ? void 0 : _b2.length) {
            _push(ssrRenderComponent(LeftOrRightIcon, {
              direction: "right",
              width: 20,
              height: 20,
              color: "#757575"
            }, null, _parent));
          } else {
            _push(`<!---->`);
          }
          _push(`</button>`);
        });
        _push(`<!--]--></div>`);
      } else {
        _push(`<div data-v-2bbd1742><!--[-->`);
        ssrRenderList(secondIssueList.value, (secondIssue, secondIndex) => {
          var _a2;
          _push(`<button${ssrRenderAttrs(mergeProps({
            key: secondIndex,
            class: "issue-list-item"
          }, ssrGetDirectiveProps(_ctx, _directive_track, {
            pId: trackPageName.value + "level_two_item-" + String(secondIndex + 1).padStart(3, "0"),
            eventName: "level_two_item"
          }, void 0, {
            click: true,
            exposure: true
          })))} data-v-2bbd1742>`);
          _push(ssrRenderComponent(unref(TickIcon), {
            class: "tick",
            width: 22,
            height: 22,
            color: secondIssue.id === ((_a2 = state.secondIssueItem) == null ? void 0 : _a2.id) ? "#444" : "transparent"
          }, null, _parent));
          _push(`<span class="content2 txt2" data-v-2bbd1742>${ssrInterpolate(secondIssue.title)}</span></button>`);
        });
        _push(`<!--]--></div>`);
      }
      _push(`</div></div>`);
    };
  }
});
const ThirdIssueSelect_vue_vue_type_style_index_0_scoped_2bbd1742_lang = "";
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/components/ThirdIssueSelect.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const ThirdIssueSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2bbd1742"]]);
const AshcanIcon = IconWrapper((props) => createVNode("svg", mergeProps(props, {
  "class": {
    "svg-color-fill": Boolean(props.fill)
  },
  "style": {
    "--fill-color": props.fill
  },
  "xmlns": "http://www.w3.org/2000/svg",
  "fill": "none",
  "viewBox": "0 0 28 28"
}), [createVNode("path", {
  "fill": "#444",
  "d": "M21.75 7.25a.75.75 0 0 1 0 1.5h-.797l-.392 12.563a2 2 0 0 1-2 1.937H9.438a2 2 0 0 1-1.999-1.938L7.047 8.75H6.25a.75.75 0 0 1 0-1.5h15.5Zm-2.298 1.5H8.547l.392 12.516a.5.5 0 0 0 .411.476l.088.008h9.123a.5.5 0 0 0 .49-.397l.01-.087.391-12.516ZM12 11.25a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V12a.75.75 0 0 1 .75-.75Zm4 0a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V12a.75.75 0 0 1 .75-.75Zm1.25-6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h6.5Z",
  "data-follow-fill": "#444"
}, null)]));
const __default__ = defineComponent({
  name: "SubmitTicket",
  components: { HelpCenterHeader, TicketTip, FileListUpload, CircleLoadingIcon, AppLayout, LeftOrRightIcon, AshcanIcon }
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  __ssrInlineRender: true,
  setup(__props) {
    useTrack();
    const router = useRouter();
    const route = useRoute();
    const { uts } = useL10n();
    const trackPageName = computed(() => {
      var _a;
      const name = ((_a = route.meta) == null ? void 0 : _a.trackPageName) || "";
      return name ? name + "_" : "";
    });
    const i18n = useI18n();
    const t = i18n.t;
    const { appContext } = getCurrentInstance();
    const caseId = computed(() => route.params.caseId);
    const isReply = computed(() => caseId.value !== void 0);
    const helpCenterStore = useHelpCenterStore();
    const mainStore = useMainStore();
    const firstIssueList = computed(() => helpCenterStore.issueList || []);
    const titleIssueItem = computed(() => {
      const allSecondIssues = firstIssueList.value.reduce((res, issue) => res.concat(issue.children || []), []);
      const secondIssueItem = allSecondIssues.find((item) => item.id === state.title_id);
      return secondIssueItem || {};
    });
    const thirdIssueList = computed(() => {
      var _a;
      if (!state.title_id)
        return [];
      return ((_a = titleIssueItem.value) == null ? void 0 : _a.children) || [];
    });
    const isArSite = computed(() => mainStore.siteAbb === "ar");
    const isRequiredPicture = computed(() => {
      const ids = [948, 949, 950];
      return ids.includes(state.title_id);
    });
    const orderRequired = computed(() => {
      const isRelatedOrder = Boolean(titleIssueItem.value.show_email2order);
      return isRelatedOrder ? state.orderInfo : true;
    });
    const skuRequired = computed(() => {
      const isRelatedSku = Boolean(titleIssueItem.value.show_sku);
      return isRelatedSku ? state.skuInfo.length && state.skuInfo.every((skuItem) => !!skuReasonMap.value[skuItem.sku_id]) : true;
    });
    const pictureRequired = computed(() => {
      var _a, _b;
      const ids = [948, 949, 950];
      return ids.includes(state.title_id) ? !!((_b = (_a = fileListUploadRef.value) == null ? void 0 : _a.fileList) == null ? void 0 : _b.length) : true;
    });
    const phoneNumberRequired = computed(() => {
      if (isArSite.value) {
        return Boolean(state.contact_phone.trim());
      }
      return true;
    });
    const enableSubmit = computed(() => {
      const issueRequired = Boolean(state.title_id);
      const titleRequired = Boolean(title.value.trim());
      const descriptionRequired = Boolean(description.value.trim());
      if (isReply.value) {
        return descriptionRequired;
      } else {
        return issueRequired && titleRequired && pictureRequired.value && descriptionRequired && orderRequired.value && skuRequired.value && phoneNumberRequired;
      }
    });
    const state = reactive({
      submitLoading: false,
      skuInfo: [],
      contact_phone: "",
      orderInfo: void 0,
      title_id: void 0
    });
    const skuReasonMap = ref({});
    const description = ref("");
    const title = ref("");
    const fileListUploadRef = ref();
    const nativeInfoStore = useNativeInfoStore();
    const safeBottomStyle = computed(() => {
      if (nativeInfoStore.isFromApp) {
        if (nativeInfoStore.isIos) {
          return { paddingBottom: "var(--pat-safe-area-bottom)" };
        }
        return { paddingBottom: `calc(var(--pat-safe-area-bottom) + 16px)` };
      }
      return { paddingBottom: "16px" };
    });
    function getIssueTitle(issueList, issueId) {
      const firstIssueItem = issueList.find((item) => item.id === issueId);
      if (firstIssueItem) {
        return firstIssueItem.title;
      } else {
        const allSecondIssues = issueList.reduce((res, curr) => res.concat(curr.children || []), []);
        const secondIssueItem = allSecondIssues.find((item) => item.id === issueId);
        if (secondIssueItem) {
          const firstIssueItem2 = issueList.find((item) => item.id === secondIssueItem.pid);
          return `${firstIssueItem2.title} - ${secondIssueItem.title}`;
        }
      }
      return "";
    }
    function onShowIssueSelected() {
      if (state.submitLoading)
        return;
      function onClose() {
        destroy();
      }
      const updateTitleId = (val) => {
        if (state.title_id !== val) {
          state.orderInfo = void 0;
          skuReasonMap.value = {};
        }
        state.title_id = val;
      };
      const { destroy } = renderComponent({
        component: IssueSelected,
        props: { onClose, value: state.title_id, "onUpdate:value": updateTitleId },
        appContext
      });
    }
    const orderListCache = ref([]);
    function onShowOrderSelected() {
      var _a;
      if (state.submitLoading)
        return;
      if (!state.title_id)
        return;
      function onClose() {
        destroy();
      }
      const updateOrderListCache = (val) => {
        orderListCache.value = val;
        update({ orderList: val });
      };
      function updateOrderInfo(orderInfo) {
        state.orderInfo = orderInfo;
      }
      function updateSkuInfo(skuInfo) {
        state.skuInfo = skuInfo;
      }
      const { destroy, update } = renderComponent({
        component: OrderSelect,
        props: {
          onClose,
          orderList: orderListCache.value,
          relatedSku: Boolean(titleIssueItem.value.show_sku),
          orderId: (_a = state.orderInfo) == null ? void 0 : _a.order_id,
          skuIds: state.skuInfo.map((sku) => sku.sku_id),
          "onUpdate:orderList": updateOrderListCache,
          "onUpdate:orderInfo": updateOrderInfo,
          "onUpdate:skuInfo": updateSkuInfo
        },
        appContext
      });
    }
    function onShowSkuIssueSelect(skuItem) {
      if (state.submitLoading)
        return;
      function onClose() {
        destroy();
      }
      const skuReasonId = ref(skuReasonMap.value[skuItem.sku_id]);
      const setSkuReasonId = (val) => {
        skuReasonMap.value[skuItem.sku_id] = val;
        skuReasonId.value = val;
      };
      const { destroy } = renderComponent({
        component: ThirdIssueSelect,
        props: { onClose, value: skuReasonId.value, issueList: thirdIssueList.value, "onUpdate:value": setSkuReasonId },
        appContext
      });
    }
    function deleteSkuItem(skuItem) {
      if (state.submitLoading)
        return;
      state.skuInfo = state.skuInfo.filter((item) => item.sku_id !== skuItem.sku_id);
      skuReasonMap.value[skuItem.sku_id] = void 0;
    }
    async function onUpdateIssueList() {
      await helpCenterStore.getIssueListData();
    }
    async function getRecaptchaKey() {
      const recaptcha = await load("6Lfkjd4UAAAAAD7bZF_ypN7P1wVoYHd7TYoqbmJt");
      return await recaptcha.execute("help_contact");
    }
    async function uploadImages() {
      if (fileListUploadRef.value) {
        const imagesData = await fileListUploadRef.value.batchUploadImages();
        const images = imagesData.reduce((res, current) => {
          if (current.status === "fulfilled") {
            res.push(current.value);
          }
          return res;
        }, []);
        return images;
      } else {
        return [];
      }
    }
    function errorMessageDialog(err) {
      const { destroy } = renderComponent({
        component: MessageDialog,
        appContext,
        props: {
          content: err.message,
          showCancelButton: false,
          okText: "Close",
          onClick: () => destroy(),
          onOk: () => destroy()
        }
      });
    }
    async function onSubmit() {
      var _a;
      if (state.submitLoading)
        return;
      state.submitLoading = true;
      const recaptchaKey = await getRecaptchaKey();
      const params = {
        title_id: state.title_id,
        title: title.value,
        question: description.value,
        dataSmp: Date.now(),
        captcha: recaptchaKey,
        experiments: [],
        images: []
      };
      const images = await uploadImages();
      params.images = images.map((image) => image.url);
      if (titleIssueItem.value.show_email2order && orderRequired.value) {
        params.order_number = (_a = state.orderInfo) == null ? void 0 : _a.order_id;
      }
      if (titleIssueItem.value.show_sku && skuRequired.value) {
        params.title_id = [];
        params.sku_id = [];
        params.sku_qty = [];
        for (const [skuId, titleId] of Object.entries(skuReasonMap.value)) {
          params.title_id.push(Number(titleId));
          params.sku_id.push(Number(skuId));
          const skutItem = state.skuInfo.find((i) => i.sku_id === Number(skuId));
          params.sku_qty.push((skutItem == null ? void 0 : skutItem.quantity) || 1);
        }
      }
      if (isArSite.value && phoneNumberRequired.value) {
        params.contact_phone = state.contact_phone;
      }
      postSubmitTicketApi(params).then(() => {
        router.replace({ name: submitCompleteRoute.name, params: { lang: i18n.locale.value } });
      }).catch((err) => {
        errorMessageDialog(err);
      }).finally(() => {
        state.submitLoading = false;
      });
    }
    async function onReply() {
      if (state.submitLoading)
        return;
      state.submitLoading = true;
      const attachments = await uploadImages();
      const params = {
        case_id: caseId.value,
        message: description.value,
        attachments
      };
      replyCaseApi(params).then(() => {
        router.back();
      }).catch((err) => {
        errorMessageDialog(err);
      }).finally(() => {
        state.submitLoading = false;
      });
    }
    function onSubmitOrReply() {
      caseId.value ? onReply() : onSubmit();
    }
    useDocumentTitle(t("helpCenter.Submit_Ticket"));
    onServerPrefetch(onUpdateIssueList);
    onMounted(() => {
      initAwsS3();
      onUpdateIssueList();
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_track = resolveDirective("track");
      _push(ssrRenderComponent(AppLayout, mergeProps({
        class: "submit-ticket",
        "clear-safe-top-area": unref(nativeInfoStore).isFromApp
      }, _attrs), {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            if (!unref(nativeInfoStore).isFromApp) {
              _push2(ssrRenderComponent(HelpCenterHeader, {
                "left-btn-event-name": trackPageName.value + "back",
                title: unref(t)("helpCenter.Submit_Ticket")
              }, null, _parent2, _scopeId));
            } else {
              _push2(`<!---->`);
            }
            _push2(ssrRenderComponent(TicketTip, { class: "ticket-tip" }, null, _parent2, _scopeId));
            _push2(`<div class="ticket-content" style="${ssrRenderStyle({ marginBottom: `${unref(nativeInfoStore).iphoneBottomSafeHeight}px` })}" data-v-28b075a0${_scopeId}>`);
            if (!isReply.value) {
              _push2(`<!--[-->`);
              if (isArSite.value) {
                _push2(`<!--[--><p class="content1" data-v-28b075a0${_scopeId}>${ssrInterpolate(unref(t)("shopping.info.phone"))}*</p><label for="title-input" data-v-28b075a0${_scopeId}><input id="title-input"${ssrRenderAttr("value", state.contact_phone)} type="tel"${ssrIncludeBooleanAttr(state.submitLoading) ? " disabled" : ""}${ssrRenderAttr("placeholder", "Input your phone number")} maxlength="200" data-v-28b075a0${_scopeId}></label><!--]-->`);
              } else {
                _push2(`<!---->`);
              }
              _push2(`<p class="content1" data-v-28b075a0${_scopeId}>${ssrInterpolate(unref(t)("helpCenter.Issue_selected"))}*</p><button${ssrRenderAttrs(mergeProps({
                type: "button",
                class: "issue-select-btn"
              }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "issue_selected_bar", eventName: "issue_selected_bar" }, void 0, {
                click: true,
                exposure: true
              })))} data-v-28b075a0${_scopeId}>`);
              if (!state.title_id) {
                _push2(`<span class="content2 placeholder-txt" data-v-28b075a0${_scopeId}>${ssrInterpolate(unref(t)("helpCenter.Please_select_your_issue"))}</span>`);
              } else {
                _push2(`<span class="content2" data-v-28b075a0${_scopeId}>${ssrInterpolate(getIssueTitle(firstIssueList.value, state.title_id))}</span>`);
              }
              _push2(ssrRenderComponent(LeftOrRightIcon, {
                direction: "right",
                width: 20,
                height: 20,
                fill: "var(--pat-black-4)"
              }, null, _parent2, _scopeId));
              _push2(`</button>`);
              if (titleIssueItem.value.show_email2order) {
                _push2(`<!--[-->`);
                if (titleIssueItem.value.show_sku) {
                  _push2(`<!--[--><p class="content1" data-v-28b075a0${_scopeId}>${ssrInterpolate("Choose item(s)")}*</p>`);
                  if (state.skuInfo.length) {
                    _push2(`<div class="sku-list" data-v-28b075a0${_scopeId}>`);
                    if (state.orderInfo) {
                      _push2(`<button class="order-select-btn" data-v-28b075a0${_scopeId}><span class="content2" data-v-28b075a0${_scopeId}>${ssrInterpolate(`Order Total: ${unref(uts)(state.orderInfo.total_amount)} (${state.orderInfo.quantity} items)
`)} ${ssrInterpolate(`Time: ${unref(transformUTCToLocal)(state.orderInfo.created_at, "DD-MM-YYYY")}`)}</span>`);
                      _push2(ssrRenderComponent(LeftOrRightIcon, {
                        direction: "right",
                        width: 20,
                        height: 20,
                        fill: "var(--pat-black-4)"
                      }, null, _parent2, _scopeId));
                      _push2(`</button>`);
                    } else {
                      _push2(`<!---->`);
                    }
                    _push2(`<!--[-->`);
                    ssrRenderList(state.skuInfo, (skuItem) => {
                      _push2(`<div class="sku-list-item" data-v-28b075a0${_scopeId}>`);
                      _push2(ssrRenderComponent(unref(Image), {
                        class: "sku-img",
                        src: skuItem.icon,
                        alt: ""
                      }, null, _parent2, _scopeId));
                      _push2(`<div class="sku-details" data-v-28b075a0${_scopeId}><div class="row-flex" data-v-28b075a0${_scopeId}><div class="sku-info" data-v-28b075a0${_scopeId}><p class="content2 ellipsis" data-v-28b075a0${_scopeId}>${ssrInterpolate(skuItem.product_name)}</p>`);
                      if (skuItem.option) {
                        _push2(`<p class="color-size ellipsis" data-v-28b075a0${_scopeId}><!--[-->`);
                        ssrRenderList(skuItem.option, (option, key) => {
                          _push2(`<span class="option" data-v-28b075a0${_scopeId}>${ssrInterpolate(key)}: ${ssrInterpolate(option)}   </span>`);
                        });
                        _push2(`<!--]--></p>`);
                      } else {
                        _push2(`<!---->`);
                      }
                      _push2(`<p class="sku-price ellipsis" data-v-28b075a0${_scopeId}><span class="h4" data-v-28b075a0${_scopeId}>${ssrInterpolate(unref(uts)(skuItem.store_price))}</span></p></div><div class="right-option" data-v-28b075a0${_scopeId}><button class="delete-btn" data-v-28b075a0${_scopeId}>`);
                      _push2(ssrRenderComponent(unref(AshcanIcon), {
                        width: 20,
                        height: 20
                      }, null, _parent2, _scopeId));
                      _push2(`</button><span class="sku-qty" data-v-28b075a0${_scopeId}>x${ssrInterpolate(skuItem.quantity)}</span></div></div><button class="sku-issue-select-btn" data-v-28b075a0${_scopeId}>`);
                      if (!skuReasonMap.value[skuItem.sku_id]) {
                        _push2(`<span class="content2 placeholder-txt" data-v-28b075a0${_scopeId}>${ssrInterpolate("Choose the reason")}* </span>`);
                      } else {
                        _push2(`<span class="content2 select-txt" data-v-28b075a0${_scopeId}>${ssrInterpolate(getIssueTitle(thirdIssueList.value, skuReasonMap.value[skuItem.sku_id]))}</span>`);
                      }
                      _push2(ssrRenderComponent(LeftOrRightIcon, {
                        class: "sku-right-icon",
                        direction: "right",
                        width: 20,
                        height: 20,
                        fill: "var(--pat-black-4)"
                      }, null, _parent2, _scopeId));
                      _push2(`</button></div></div>`);
                    });
                    _push2(`<!--]--></div>`);
                  } else {
                    _push2(`<button${ssrRenderAttrs(mergeProps({
                      type: "button",
                      class: "issue-select-btn"
                    }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "order_selected_bar", eventName: "order_selected_bar" }, void 0, {
                      click: true,
                      exposure: true
                    })))} data-v-28b075a0${_scopeId}><span class="content2 placeholder-txt" data-v-28b075a0${_scopeId}>${ssrInterpolate("Please Choose your item(s)")}</span>`);
                    _push2(ssrRenderComponent(LeftOrRightIcon, {
                      direction: "right",
                      width: 20,
                      height: 20,
                      fill: "var(--pat-black-4)"
                    }, null, _parent2, _scopeId));
                    _push2(`</button>`);
                  }
                  _push2(`<!--]-->`);
                } else {
                  _push2(`<!--[--><p class="content1" data-v-28b075a0${_scopeId}>${ssrInterpolate("Choose order")}*</p><button${ssrRenderAttrs(mergeProps({
                    type: "button",
                    class: "issue-select-btn"
                  }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "sku_selected_bar", eventName: "sku_selected_bar" }, void 0, {
                    click: true,
                    exposure: true
                  })))} data-v-28b075a0${_scopeId}>`);
                  if (!state.orderInfo) {
                    _push2(`<span class="content2 placeholder-txt" data-v-28b075a0${_scopeId}>${ssrInterpolate("Please Choose your order")}</span>`);
                  } else {
                    _push2(`<!--[-->`);
                    if (titleIssueItem.value.show_sku) {
                      _push2(`<span class="content2" data-v-28b075a0${_scopeId}>${ssrInterpolate(`Order Total: ${unref(uts)(state.orderInfo.total_amount)} (${state.orderInfo.quantity} items)
`)} ${ssrInterpolate(`Time: ${unref(transformUTCToLocal)(state.orderInfo.created_at, "DD-MM-YY HH:mm")}`)}</span>`);
                    } else {
                      _push2(`<span class="content2" data-v-28b075a0${_scopeId}>${ssrInterpolate(`Order Total: ${unref(uts)(state.orderInfo.total_amount)}
`)} ${ssrInterpolate(`Total: ${state.orderInfo.quantity} items`)}</span>`);
                    }
                    _push2(`<!--]-->`);
                  }
                  _push2(ssrRenderComponent(LeftOrRightIcon, {
                    direction: "right",
                    width: 20,
                    height: 20,
                    fill: "var(--pat-black-4)"
                  }, null, _parent2, _scopeId));
                  _push2(`</button><!--]-->`);
                }
                _push2(`<!--]-->`);
              } else {
                _push2(`<!---->`);
              }
              _push2(`<p class="content1" data-v-28b075a0${_scopeId}>${ssrInterpolate("Title")}*</p><label for="title-input" data-v-28b075a0${_scopeId}><input id="title-input"${ssrRenderAttr("value", title.value)} type="text"${ssrIncludeBooleanAttr(state.submitLoading) ? " disabled" : ""}${ssrRenderAttr("placeholder", unref(t)("about.common.please_enter_a_title"))} maxlength="200" data-v-28b075a0${_scopeId}></label><!--]-->`);
            } else {
              _push2(`<!---->`);
            }
            _push2(`<p class="content1" data-v-28b075a0${_scopeId}>${ssrInterpolate(unref(t)("helpCenter.Describe_question"))}*</p><label for="describe-textarea" data-v-28b075a0${_scopeId}><textarea id="describe-textarea"${ssrIncludeBooleanAttr(state.submitLoading) ? " disabled" : ""} name="question" rows="10"${ssrRenderAttr("placeholder", unref(t)("helpCenter.describe_question_placeholder"))} data-v-28b075a0${_scopeId}>${ssrInterpolate(description.value)}</textarea></label><p class="content1 file-upload-title" data-v-28b075a0${_scopeId}>${ssrInterpolate(unref(t)("helpCenter.Add_picture"))} ${ssrInterpolate(isRequiredPicture.value ? "*" : "")}</p>`);
            _push2(ssrRenderComponent(FileListUpload, {
              ref_key: "fileListUploadRef",
              ref: fileListUploadRef,
              disabled: state.submitLoading
            }, null, _parent2, _scopeId));
            _push2(`</div><button${ssrRenderAttrs(mergeProps({
              type: "button",
              class: ["submit-btn", [enableSubmit.value && !state.submitLoading ? "enable" : "disable"]],
              style: safeBottomStyle.value
            }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "submit_button", eventName: "submit_button" }, void 0, {
              click: true,
              exposure: true
            })))} data-v-28b075a0${_scopeId}><span class="h4" data-v-28b075a0${_scopeId}>`);
            if (state.submitLoading) {
              _push2(ssrRenderComponent(unref(CircleLoadingIcon), {
                width: 24,
                height: 24,
                fill: "#fff",
                class: "circle-loading-icon"
              }, null, _parent2, _scopeId));
            } else {
              _push2(`<!---->`);
            }
            _push2(` ${ssrInterpolate(unref(t)("common.submit"))}</span></button>`);
          } else {
            return [
              !unref(nativeInfoStore).isFromApp ? (openBlock(), createBlock(HelpCenterHeader, {
                key: 0,
                "left-btn-event-name": trackPageName.value + "back",
                title: unref(t)("helpCenter.Submit_Ticket")
              }, null, 8, ["left-btn-event-name", "title"])) : createCommentVNode("", true),
              createVNode(TicketTip, { class: "ticket-tip" }),
              createVNode("div", {
                class: "ticket-content",
                style: { marginBottom: `${unref(nativeInfoStore).iphoneBottomSafeHeight}px` }
              }, [
                !isReply.value ? (openBlock(), createBlock(Fragment, { key: 0 }, [
                  isArSite.value ? (openBlock(), createBlock(Fragment, { key: 0 }, [
                    createVNode("p", { class: "content1" }, toDisplayString(unref(t)("shopping.info.phone")) + "*", 1),
                    createVNode("label", { for: "title-input" }, [
                      withDirectives(createVNode("input", {
                        id: "title-input",
                        "onUpdate:modelValue": ($event) => state.contact_phone = $event,
                        type: "tel",
                        disabled: state.submitLoading,
                        placeholder: "Input your phone number",
                        maxlength: "200"
                      }, null, 8, ["onUpdate:modelValue", "disabled"]), [
                        [
                          vModelText,
                          state.contact_phone,
                          void 0,
                          { trim: true }
                        ]
                      ])
                    ])
                  ], 64)) : createCommentVNode("", true),
                  createVNode("p", { class: "content1" }, toDisplayString(unref(t)("helpCenter.Issue_selected")) + "*", 1),
                  withDirectives((openBlock(), createBlock("button", {
                    type: "button",
                    class: "issue-select-btn",
                    onClick: onShowIssueSelected
                  }, [
                    !state.title_id ? (openBlock(), createBlock("span", {
                      key: 0,
                      class: "content2 placeholder-txt"
                    }, toDisplayString(unref(t)("helpCenter.Please_select_your_issue")), 1)) : (openBlock(), createBlock("span", {
                      key: 1,
                      class: "content2"
                    }, toDisplayString(getIssueTitle(firstIssueList.value, state.title_id)), 1)),
                    createVNode(LeftOrRightIcon, {
                      direction: "right",
                      width: 20,
                      height: 20,
                      fill: "var(--pat-black-4)"
                    })
                  ])), [
                    [
                      _directive_track,
                      { pId: trackPageName.value + "issue_selected_bar", eventName: "issue_selected_bar" },
                      void 0,
                      {
                        click: true,
                        exposure: true
                      }
                    ]
                  ]),
                  titleIssueItem.value.show_email2order ? (openBlock(), createBlock(Fragment, { key: 1 }, [
                    titleIssueItem.value.show_sku ? (openBlock(), createBlock(Fragment, { key: 0 }, [
                      createVNode("p", { class: "content1" }, toDisplayString("Choose item(s)") + "*", 1),
                      state.skuInfo.length ? (openBlock(), createBlock("div", {
                        key: 0,
                        class: "sku-list"
                      }, [
                        state.orderInfo ? (openBlock(), createBlock("button", {
                          key: 0,
                          class: "order-select-btn",
                          onClick: onShowOrderSelected
                        }, [
                          createVNode("span", { class: "content2" }, toDisplayString(`Order Total: ${unref(uts)(state.orderInfo.total_amount)} (${state.orderInfo.quantity} items)
`) + " " + toDisplayString(`Time: ${unref(transformUTCToLocal)(state.orderInfo.created_at, "DD-MM-YYYY")}`), 1),
                          createVNode(LeftOrRightIcon, {
                            direction: "right",
                            width: 20,
                            height: 20,
                            fill: "var(--pat-black-4)"
                          })
                        ])) : createCommentVNode("", true),
                        (openBlock(true), createBlock(Fragment, null, renderList(state.skuInfo, (skuItem) => {
                          return openBlock(), createBlock("div", {
                            key: skuItem.sku_id,
                            class: "sku-list-item"
                          }, [
                            createVNode(unref(Image), {
                              class: "sku-img",
                              src: skuItem.icon,
                              alt: ""
                            }, null, 8, ["src"]),
                            createVNode("div", { class: "sku-details" }, [
                              createVNode("div", { class: "row-flex" }, [
                                createVNode("div", { class: "sku-info" }, [
                                  createVNode("p", { class: "content2 ellipsis" }, toDisplayString(skuItem.product_name), 1),
                                  skuItem.option ? (openBlock(), createBlock("p", {
                                    key: 0,
                                    class: "color-size ellipsis"
                                  }, [
                                    (openBlock(true), createBlock(Fragment, null, renderList(skuItem.option, (option, key) => {
                                      return openBlock(), createBlock("span", {
                                        key: `${skuItem.id}-${option}-${key}`,
                                        class: "option"
                                      }, toDisplayString(key) + ": " + toDisplayString(option) + "   ", 1);
                                    }), 128))
                                  ])) : createCommentVNode("", true),
                                  createVNode("p", { class: "sku-price ellipsis" }, [
                                    createVNode("span", { class: "h4" }, toDisplayString(unref(uts)(skuItem.store_price)), 1)
                                  ])
                                ]),
                                createVNode("div", { class: "right-option" }, [
                                  createVNode("button", {
                                    class: "delete-btn",
                                    onClick: ($event) => deleteSkuItem(skuItem)
                                  }, [
                                    createVNode(unref(AshcanIcon), {
                                      width: 20,
                                      height: 20
                                    })
                                  ], 8, ["onClick"]),
                                  createVNode("span", { class: "sku-qty" }, "x" + toDisplayString(skuItem.quantity), 1)
                                ])
                              ]),
                              createVNode("button", {
                                class: "sku-issue-select-btn",
                                onClick: ($event) => onShowSkuIssueSelect(skuItem)
                              }, [
                                !skuReasonMap.value[skuItem.sku_id] ? (openBlock(), createBlock("span", {
                                  key: 0,
                                  class: "content2 placeholder-txt"
                                }, toDisplayString("Choose the reason") + "* ")) : (openBlock(), createBlock("span", {
                                  key: 1,
                                  class: "content2 select-txt"
                                }, toDisplayString(getIssueTitle(thirdIssueList.value, skuReasonMap.value[skuItem.sku_id])), 1)),
                                createVNode(LeftOrRightIcon, {
                                  class: "sku-right-icon",
                                  direction: "right",
                                  width: 20,
                                  height: 20,
                                  fill: "var(--pat-black-4)"
                                })
                              ], 8, ["onClick"])
                            ])
                          ]);
                        }), 128))
                      ])) : withDirectives((openBlock(), createBlock("button", {
                        key: 1,
                        type: "button",
                        class: "issue-select-btn",
                        onClick: onShowOrderSelected
                      }, [
                        createVNode("span", { class: "content2 placeholder-txt" }, toDisplayString("Please Choose your item(s)"), 1),
                        createVNode(LeftOrRightIcon, {
                          direction: "right",
                          width: 20,
                          height: 20,
                          fill: "var(--pat-black-4)"
                        })
                      ])), [
                        [
                          _directive_track,
                          { pId: trackPageName.value + "order_selected_bar", eventName: "order_selected_bar" },
                          void 0,
                          {
                            click: true,
                            exposure: true
                          }
                        ]
                      ])
                    ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
                      createVNode("p", { class: "content1" }, toDisplayString("Choose order") + "*"),
                      withDirectives((openBlock(), createBlock("button", {
                        type: "button",
                        class: "issue-select-btn",
                        onClick: onShowOrderSelected
                      }, [
                        !state.orderInfo ? (openBlock(), createBlock("span", {
                          key: 0,
                          class: "content2 placeholder-txt"
                        }, toDisplayString("Please Choose your order"))) : (openBlock(), createBlock(Fragment, { key: 1 }, [
                          titleIssueItem.value.show_sku ? (openBlock(), createBlock("span", {
                            key: 0,
                            class: "content2"
                          }, toDisplayString(`Order Total: ${unref(uts)(state.orderInfo.total_amount)} (${state.orderInfo.quantity} items)
`) + " " + toDisplayString(`Time: ${unref(transformUTCToLocal)(state.orderInfo.created_at, "DD-MM-YY HH:mm")}`), 1)) : (openBlock(), createBlock("span", {
                            key: 1,
                            class: "content2"
                          }, toDisplayString(`Order Total: ${unref(uts)(state.orderInfo.total_amount)}
`) + " " + toDisplayString(`Total: ${state.orderInfo.quantity} items`), 1))
                        ], 64)),
                        createVNode(LeftOrRightIcon, {
                          direction: "right",
                          width: 20,
                          height: 20,
                          fill: "var(--pat-black-4)"
                        })
                      ])), [
                        [
                          _directive_track,
                          { pId: trackPageName.value + "sku_selected_bar", eventName: "sku_selected_bar" },
                          void 0,
                          {
                            click: true,
                            exposure: true
                          }
                        ]
                      ])
                    ], 64))
                  ], 64)) : createCommentVNode("", true),
                  createVNode("p", { class: "content1" }, toDisplayString("Title") + "*"),
                  createVNode("label", { for: "title-input" }, [
                    withDirectives(createVNode("input", {
                      id: "title-input",
                      "onUpdate:modelValue": ($event) => title.value = $event,
                      type: "text",
                      disabled: state.submitLoading,
                      placeholder: unref(t)("about.common.please_enter_a_title"),
                      maxlength: "200"
                    }, null, 8, ["onUpdate:modelValue", "disabled", "placeholder"]), [
                      [vModelText, title.value]
                    ])
                  ])
                ], 64)) : createCommentVNode("", true),
                createVNode("p", { class: "content1" }, toDisplayString(unref(t)("helpCenter.Describe_question")) + "*", 1),
                createVNode("label", { for: "describe-textarea" }, [
                  withDirectives(createVNode("textarea", {
                    id: "describe-textarea",
                    "onUpdate:modelValue": ($event) => description.value = $event,
                    disabled: state.submitLoading,
                    name: "question",
                    rows: "10",
                    placeholder: unref(t)("helpCenter.describe_question_placeholder")
                  }, null, 8, ["onUpdate:modelValue", "disabled", "placeholder"]), [
                    [vModelText, description.value]
                  ])
                ]),
                createVNode("p", { class: "content1 file-upload-title" }, toDisplayString(unref(t)("helpCenter.Add_picture")) + " " + toDisplayString(isRequiredPicture.value ? "*" : ""), 1),
                createVNode(FileListUpload, {
                  ref_key: "fileListUploadRef",
                  ref: fileListUploadRef,
                  disabled: state.submitLoading
                }, null, 8, ["disabled"])
              ], 4),
              withDirectives((openBlock(), createBlock("button", {
                type: "button",
                class: ["submit-btn", [enableSubmit.value && !state.submitLoading ? "enable" : "disable"]],
                style: safeBottomStyle.value,
                onClick: onSubmitOrReply
              }, [
                createVNode("span", { class: "h4" }, [
                  state.submitLoading ? (openBlock(), createBlock(unref(CircleLoadingIcon), {
                    key: 0,
                    width: 24,
                    height: 24,
                    fill: "#fff",
                    class: "circle-loading-icon"
                  })) : createCommentVNode("", true),
                  createTextVNode(" " + toDisplayString(unref(t)("common.submit")), 1)
                ])
              ], 6)), [
                [
                  _directive_track,
                  { pId: trackPageName.value + "submit_button", eventName: "submit_button" },
                  void 0,
                  {
                    click: true,
                    exposure: true
                  }
                ]
              ])
            ];
          }
        }),
        _: 1
      }, _parent));
    };
  }
});
const SubmitTicket_vue_vue_type_style_index_0_scoped_28b075a0_lang = "";
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/SubmitTicket.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const SubmitTicket = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28b075a0"]]);
export {
  SubmitTicket as default
};
